﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>xBim浏览器4</title>
    <!--<script src="/Scripts/gl-matrix.js"></script>
    <script src="/Scripts/webgl-utils.js"></script>-->
    <link href="/Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/Scripts/bootstrap/bootstrap-theme.min.css" rel="stylesheet" />

    <script src="/Scripts/xbim/xbim-viewer.debug.bundle.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-cube.js"></script>
    <script src="/Scripts/xbim/xbim-navigation-home.js"></script>

    <script src="/Scripts/jquery/jquery-2.2.3.min.js"></script>
    <script src="/Scripts/bootstrap/bootstrap.min.js"></script>
    <script src="/Scripts/Util/treeHelper.js"></script>

    <style>

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
            border: none;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

</head>

<body>

    <div class="container">
    </div>
    <nav class="navbar navbar-default" style="margin-bottom:0;">
        <div class="container-fluid">
            <!-- 品牌Logo、最小化时菜单 -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="xBIM" src="/Scripts/Img/logo/xbim_white_h35.png" style="margin-top:-10px;background-color:cornflowerblue;" />
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- 左对齐 -->
                <ul class="nav navbar-nav">
                    <li> <a style="cursor:pointer;" onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setState(states.UNDEFINED, types[i])}}"> 显示全部 </a> </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拖动模式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.navigationMode = 'orbit'">沿轨迹运行</a>  </li>
                            <li> <a onclick="viewer.navigationMode = 'free-orbit'">自由旋转</a>  </li>
                            <li> <a onclick="viewer.navigationMode = 'pan'">平移</a>  </li>
                            <li> <a onclick="viewer.navigationMode = 'zoom'">缩放</a>  </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">视图 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a onclick="viewer.show('front')">正面</a> </li>
                            <li><a onclick="viewer.show('back')">背面</a> </li>
                            <li><a onclick="viewer.show('top')">上面</a> </li>
                            <li> <a onclick="viewer.show('bottom')">下面</a></li>
                            <li> <a onclick="viewer.show('left')">左面</a> </li>
                            <li><a onclick="viewer.show('right')">右面</a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">剖切 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.clip();"> 剖切 </a> </li>
                            <li> <a onclick="viewer.unclip();"> 取消剖切 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">相机视角 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.camera = 'perspective';"> 透视 </a> </li>
                            <li> <a onclick="viewer.camera = 'orthogonal';"> 正交 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">单击隐藏 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <label> <input type="radio" name="radioHiding" value="hideOne" /> 隐藏单个 </label>  </li>
                            <li> <label> <input type="radio" name="radioHiding" value="hideType" /> 隐藏类型 </label> </li>
                            <li> <label> <input type="radio" name="radioHiding" value="noHide" /> 取消 </label> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">样式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(1, types[i])}}"> 透明化 </a> </li>
                            <li> <a onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(2, types[i])}}"> 白化 </a> </li>
                            <li> <a onclick="for (var i in types){ if (types[i] !== types.IFCSPACE) {viewer.setStyle(xState.UNSTYLED, types[i])}}"> 默认 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">渲染模式 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <label> <input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="viewer.renderingMode = 'normal';" /> 普通 </label> </li>
                            <li> <label> <input type="radio" name="radioRenderingMode" value="xray" onchange="viewer.renderingMode = 'x-ray';" /> X射线 </label>  </li>
                        </ul>
                    </li>

                </ul>
                <!-- 右对齐 -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">墙 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="makeWallsRed()"> 刷红 所有墙 </a> </li>
                            <li> <a onclick="hideWalls()"> 隐藏 所有墙 </a> </li>
                            <li> <a onclick="resetWalls()"> 复位 所有墙 </a> </li>
                            <li role="separator" class="divider"></li>
                            <li> <a onclick="selectAllWalls()"> 选中 所有墙 </a> </li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">空间 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li> <a onclick="viewer.setState(states.UNDEFINED, types.IFCSPACE)"> 显示 </a> </li>
                            <li> <a onclick="viewer.setState(states.HIDDEN, types.IFCSPACE)"> 隐藏 </a> </li>

                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <div style=" ">
        当前ID: <span id="coords"></span>
        帧速率: <span id="fps"></span>
        柔化质地： <span id="fpt"></span>
        错误日志：  <span id="errLog" style="color: red">  </span>
    </div>
    <!-- 画布 -->
    <canvas id="xBIM-viewer" width="800" height="600"></canvas>






    <!-- 基础脚本 -->
    <script type="text/javascript">
        var QueryString = function () {
            // This function is anonymous, is executed immediately and
            // the return value is assigned to QueryString!
            var queryString = {};
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                // If first entry with this name
                if (typeof queryString[pair[0]] === "undefined") {
                    queryString[pair[0]] = pair[1];
                    // If second entry with this name
                } else if (typeof queryString[pair[0]] === "string") {
                    var arr = [queryString[pair[0]], pair[1]];
                    queryString[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    queryString[pair[0]].push(pair[1]);
                }
            }
            return queryString;
        }();
    </script>

    <!-- 业务脚本 -->
    <script type="text/javascript">

        $(function () {
            $("#xBIM-viewer").width(window.innerWidth - 20);
            $("#xBIM-viewer").height(window.innerHeight - 120);
        });

        // 初始化，定义事件
        var viewer = new xViewer("xBIM-viewer");
        viewer.background = [0, 0, 0];
        viewer.on("error", function (arg) {
            var container = viewer._canvas.parentNode;
            if (container) {
                //preppend error report
                container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
            }
        });

        viewer.show("back");
        viewer.on("pick", function (arg) {
            var span = document.getElementById("coords");
            if (span) {
                span.innerHTML = arg.id;
            }
        });
        viewer.on("mouseDown", function (arg) {
            viewer.setCameraTarget(arg.id);
        });
        viewer.on("fps", function (fps) {
            var span = document.getElementById("fps");
            if (span) {
                span.innerHTML = fps;
            }
        });
        var span = document.getElementById("fpt");
        if (span) {
            span.innerHTML = viewer._fpt != null;
        }

        // 加载模型
        var model = "";
        if (typeof (QueryString.model) == "undefined") { model = "/res/ifc/IFC_Schependomlaan.wexbim"; }
        else { model = QueryString.model; }
        viewer.load(model);
        viewer.start();


        //
        var types = xProductType;
        var states = xState;
        viewer.defineStyle(0, [255, 0, 0, 255]);  //red
        viewer.defineStyle(1, [0, 0, 255, 100]);  //semitransparent blue
        viewer.defineStyle(2, [255, 255, 255, 255]); //white
        var makeWallsRed = function () {
            viewer.setStyle(0, types.IFCWALLSTANDARDCASE);
            viewer.setStyle(0, types.IFCCURTAINWALL);
            viewer.setStyle(0, types.IFCWALL);
        }
        var selectAllWalls = function () {
            viewer.setState(states.HIGHLIGHTED, types.IFCWALLSTANDARDCASE);
            viewer.setState(states.HIGHLIGHTED, types.IFCCURTAINWALL);
            viewer.setState(states.HIGHLIGHTED, types.IFCWALL);
        }
        var hideWalls = function () {
            viewer.setState(states.HIDDEN, types.IFCWALLSTANDARDCASE);
            viewer.setState(states.HIDDEN, types.IFCCURTAINWALL);
            viewer.setState(states.HIDDEN, types.IFCWALL);
        }
        var resetWalls = function () {
            viewer.setState(states.UNDEFINED, types.IFCWALLSTANDARDCASE);
            viewer.setState(states.UNDEFINED, types.IFCCURTAINWALL);
            viewer.setState(states.UNDEFINED, types.IFCWALL);
        }
        viewer.on("pick", function (args) {
            var id = args.id;
            var radios = document.getElementsByName("radioHiding");
            for (var i in radios) {
                if (radios.hasOwnProperty(i)) {
                    var radio = radios[i];
                    if (radio.checked) {
                        var val = radio.value;
                        if (val === "noHiding") return;
                        if (val === "hideOne") viewer.setState(states.HIDDEN, [id]);
                        if (val === "hideType") {
                            var type = viewer.getProductType(id);
                            viewer.setState(states.HIDDEN, type);
                        }
                        break;
                    }
                }
            }

            //viewer.zoomTo(id);
        });
        // 加载插件： 导航，主页
        var cube = new xNavigationCube();
        viewer.addPlugin(cube);

        var home = new xNavigationHome();
        viewer.addPlugin(home);</script>


</body>

</html>